<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta username="viewport" content="width=device-width, initial-scale=1.0">
    <title>理发店项目管理系统后台</title>
    <link rel="stylesheet" href="../css/amazeui.css" />
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/core.css" />
    <link rel="stylesheet" href="../css/menu.css" />
    <link rel="stylesheet" href="../css/index.css" />
    <link rel="stylesheet" href="../css/admin.css" />
    <link rel="stylesheet" href="../css/page/typography.css" />
    <link rel="stylesheet" href="../css/page/form.css" />
</head>
<body>
<!-- Begin page -->
<header class="am-topbar am-topbar-fixed-top">
    <div class="am-topbar-left am-hide-sm-only">
        <a href="index.action" class="logo"><span>Admin<span>to</span></span><i class="zmdi zmdi-layers"></i></a>
    </div>
	
    <div class="contain">
        <ul class="am-nav am-navbar-nav am-navbar-left">
            <li><h4 class="page-title">用户管理</h4></li>
        </ul>
				
        <ul class="am-nav am-navbar-nav am-navbar-right">
            <li class="inform"><i class="am-icon-bell-o" aria-hidden="true"></i></li>
            <li class="hidden-xs am-hide-sm-only">
                <form role="search" class="app-search">
                    <input type="text" placeholder="Search..." class="form-control">
                    <a href=""><img src="../images/search.png"></a>
                </form>
            </li>
        </ul>
    </div>
</header>
<!-- end page -->

<div class="admin">
    <!--<div class="am-g">-->
    <!-- ========== Left Sidebar Start ========== -->
    <!--<div class="left side-menu am-hide-sm-only am-u-md-1 am-padding-0">
			<div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 548px;">
				<div class="sidebar-inner slimscrollleft" style="overflow: hidden; width: auto; height: 548px;">-->
    <!-- sidebar start -->
    <div class="admin-sidebar am-offcanvas  am-padding-0" id="admin-offcanvas">
        <div class="am-offcanvas-bar admin-offcanvas-bar">
            <!-- User -->
            <div class="user-box am-hide-sm-only">
                <div class="user-img">
                    <img src="../images/hehe.jpg" alt="user-img" title="Mat Helme" class="img-circle img-thumbnail img-responsive">
                    <div class="user-status offline"><i class="am-icon-dot-circle-o" aria-hidden="true"></i></div>
                </div>
                <h5><a href="#">管理员：宇健</a> </h5>
                <ul class="list-inline">
                    <li>
                        <a href="#">
                            <i class="fa fa-cog" aria-hidden="true"></i>
                        </a>
                    </li>
	
                    <li>
                        <a href="#" class="text-custom">
                            <i class="fa fa-cog" aria-hidden="true"></i>
                        </a>
                    </li>
                </ul>
            </div>
            <!-- End User -->
	            
            <ul class="am-list admin-sidebar-list">
                <li><a href="index.action"><span class="am-icon-home"></span> 首页</a></li>
                <li class="admin-parent">
                    <a class="am-cf" data-am-collapse="{target: '#collapse-nav1'}"><span class="am-icon-table"></span> 店铺管理 <span class="am-icon-angle-right am-fr am-margin-right"></span></a>
                    <ul class="am-list am-collapse admin-sidebar-sub am-in" id="collapse-nav1">
                        <!--<li><a href="table_basic.action" class="am-cf"> 基本表格</span></a></li>-->
                        <li><a href="listCustomer.action">用户管理</a></li>
                        <li><a href="listBarber.action">员工管理</a></li>
                    </ul>
                </li>
                <li class="admin-parent">
                    <a class="am-cf" data-am-collapse="{target: '#collapse-nav2'}"><i class="am-icon-line-chart" aria-hidden="true"></i> 菜单管理 <span class="am-icon-angle-right am-fr am-margin-right"></span></a>
                    <ul class="am-list am-collapse admin-sidebar-sub am-in" id="collapse-nav2">
                        <li><a href="listProduct.action" class="am-cf"> 理发产品</span></a></li>
                        <li><a href="listService.action" class="am-cf"> 理发类型</span></a></li>
                    </ul>
                </li>
                <li class="admin-parent">
                    <a class="am-cf" data-am-collapse="{target: '#collapse-nav5'}"><span class="am-icon-file"></span> 预约管理 <span class="am-icon-angle-right am-fr am-margin-right"></span></a>
                    <ul class="am-list am-collapse admin-sidebar-sub am-in" id="collapse-nav5">
                        <li><a href="listCustomer.action" class="am-cf"> 网站样式</a></li>
                        <li><a href="listCustomer.action"> 轮播设置</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <!-- sidebar end -->
    <!-- ========== Left Sidebar end ========== -->

    <!--	<div class="am-g">-->
    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <div class="content-page">
        <!-- Start content -->
        <div class="content">
            <div class="card-box">
                <!-- Row start -->
                <div class="am-g">
                    <div class="am-u-sm-12 am-u-md-6">
                        <div class="am-btn-toolbar">
                            <div class="am-btn-group am-btn-group-xs">
                                <button type="button" class="am-btn am-btn-default" onclick="edit(this)"><span class="am-icon-plus"></span> 新增</button>
                                <button type="button" class="am-btn am-btn-default"><span class="am-icon-save"></span> 导出</button>
                                <button type="button" class="am-btn am-btn-default" onclick="dele(0)" id="del"><span class="am-icon-trash-o"></span> 删除</button>
                            </div>
                        </div>
                    </div>
				        
                    <div class="am-u-sm-12 am-u-md-3">
                        <div class="am-input-group am-input-group-sm">
                            <input type="text" class="am-form-field">
                            <span class="am-input-group-btn">
                                <button class="am-btn am-btn-default" type="button">搜索</button>
                            </span>
                        </div>
                    </div>
                </div>
                <!-- Row end -->
					  
                <!-- Row start -->
                <div class="am-g">
                    <div class="am-u-sm-12">
                        <form class="am-form" id="delForm">
                                <table class="am-table am-table-striped am-table-hover table-main">
                                <thead>
                                <tr>
                                    <th class="table-check"><input type="checkbox" id="checkAll"/></th>
                                    <!--<th class="table-id">ID</th>-->
                                    <th class="table-title">账号</th>
                                    <th class="table-type">密码</th>
                                    <th class="table-author am-hide-sm-only">手机</th>
                                    <th class="table-type">会员</th>
                                    <th class="table-type">学生</th>
                                    <th class="table-type">性别</th>
                                    <th class="table-type">年龄</th>
                                    <!--<th class="table-date am-hide-sm-only">Email</th>-->
                                    <th class="table-set">操作</th>
                                </tr>
                                </thead>
                                <tbody id="usertbody">
                                    <!--<tr>
                                        <td class="table-check"><input type="checkbox" name='ids' value='${id}'/></td>
                                        <td class="name">${name}</td>
                                        <td class="password">${password}</td>
                                        <td class="tel">${phone}</td>
                                        <td class="memberStr">${memberStr}</td>
                                        <td class="studentStr">${studentStr}</td>
                                        <td class="sexStr">${sexStr}</td>
                                        <td class="age">${age}</td>
                                        <td>
                                            <div class="am-btn-toolbar">
                                                <div class="am-btn-group am-btn-group-xs" data-id="${id}">
                                                    <button type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary edit" onclick="edit(this)"><span class="am-icon-pencil-square-o"></span> 编辑</button>
                                                    <button type="button" class="am-btn am-btn-default am-btn-xs am-hide-sm-only"><span class="am-icon-copy"></span> 复制</button>
                                                    <button type="button" class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only delete" onclick="delOne(this)"><span class="am-icon-trash-o"></span> 删除</button>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>-->
                                </tbody>
                            </table>
                            <div class="am-text-center" id="tip">
                                数据加载中<i class="am-icon-spinner am-icon-pulse"></i>
                            </div>
                            <!--<div class="am-cf">
                                共 14 条记录
                                <div class="am-fr">
                                    <ul class="am-pagination">
                                        <li class="am-disabled"><a href="#">«</a></li>
                                        <li class="am-active"><a href="#">1</a></li>
                                        <li><a href="#">2</a></li>
                                        <li><a href="#">3</a></li>
                                        <li><a href="#">4</a></li>
                                        <li><a href="#">5</a></li>
                                        <li><a href="#">»</a></li>
                                    </ul>
                                </div>
                            </div>-->
                            <hr />
                            <p>理发店后台管理系统</p>
                        </form>
                    </div>
                </div>
                <!-- Row end -->
            </div>
        </div>
    </div>
</div>
<!-- end right Content here -->
<!--</div>-->
</div>
</div>


<!--回复弹窗-->
<div class="am-modal am-modal-prompt" tabindex="-1" id="my-prompt">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">用户账号密码信息</div>
        <div class="am-modal-bd">
            <div id="content"></div>
            <input class="am-modal-prompt-input" id="name" placeholder="请输入用户账号"/>
            <input class="am-modal-prompt-input" id="password" placeholder="请输入密码"/>
            <input class="am-modal-prompt-input" id="tel" placeholder="请输入手机号码"/>
            <input class="am-modal-prompt-input" id="studentStr" placeholder="是否学生"/>
            <input class="am-modal-prompt-input" id="memberStr" placeholder="是否会员"/>
            <input class="am-modal-prompt-input" id="sexStr" placeholder="性别"/>
            <input class="am-modal-prompt-input" id="age" placeholder="年龄"/>
            <!--<input class="am-modal-prompt-input" id="email" placeholder="请输入电子邮箱"/>-->
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn" data-am-modal-cancel>取消</span>
            <span class="am-modal-btn" data-am-modal-confirm>确认</span>
        </div>
    </div>
</div>

<!--删除弹窗-->
<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">删除确认</div>
        <div class="am-modal-bd">
            你确定要删除吗？
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn" data-am-modal-cancel>取消</span>
            <span class="am-modal-btn" data-am-modal-confirm>确定</span>
        </div>
    </div>
</div>
<!-- navbar -->
<a href="admin-offcanvas" class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu" data-am-offcanvas="{target: '#admin-offcanvas'}"><!--<i class="fa fa-bars" aria-hidden="true"></i>--></a>


</body>
<script type="text/javascript" src="../js/jquery-2.1.0.js" ></script>
<script type="text/javascript" src="../js/amazeui.min.js"></script>
<!--<script type="text/javascript" src="../js/app.js" ></script>-->
<script type="text/javascript" src="../js/blockUI.js" ></script>

<script>
    /**
     * Created by Galois on 2017/7/15.
     */
    $.support.cors = true; //跨域
    var content = $("tbody").html().trim().substring(4).replace("-->", "");
    var reqHeading = "/";	//注意，志锋的代码这里是没有weAnalysis的
    var delFormURL = reqHeading+"admin/remove.action";
    var $that;
    /*var $that, json;*/
    getContent();//列表页面加载,从json拿到数据填充到页面

    /*获取json内容*/
    function getData(result) {
        if(result.code == 200){
            return result.data;
        }else{
            alert("服务器错误");
            return null;
        }
    }
    /*获取内容*/
    function getContent() {
        /*获取列表http://yujian.iok.la/pms/User/admin/index.action	user.json*/
        $.get("../admin/customer/adminIndex.action","", function (result, err) {                   //now_page++?   相当于第几次加载
            var items = getData(result);
            //console.log(items[0].email);  测试数据形式
            appendContent(items);
        })
    }

    /*json中的list对象取出后填充页面*/
    function appendContent(data) {
        //console.log(data);
        $("tbody").html("");
        for (var i = 0; i < data.length; i++) {
            $("tbody").append( getTbody(content, data[i]) );     //这里data[i]即为User[]
            hideCheckbox();
        }
        //加载完成提示功能
        if (data.length == 0)
            $("#tip").html('<i class="am-icon-warning">暂无数据');
        else {
            $("#tip").html('<i class="am-icon-check">加载完成');
            $("#tip").fadeOut(2000);
        }
    }

    function getTbody(content, data) {
        for (var key in data) {
        	 var reg = new RegExp("\\$\\{" + key + "\\}","g");
             content = content.replace(reg, data[key]);
           // content = content.replace("${" + key + "}", data[key]);
        }
        return content;
    }

    //ajax封装
    function ajax(url, data, success, error, data_type) {
        data_type = (data_type == null) ? "json" : data_type;
        $.ajax({
            type: 'post',
            data: data,
            url: url,
            dataType: data_type,
            contentType: "application/json",
            success: function (d) {
                success(d);
            },
            error: function (e) {
                error(e);
            }
        });
    }
	
  	//新增完毕之后
    function appenContent(content, data) {
        for (var key in data) {
            content = content.replace("${" + key + "}", data[key]);
        }
        return content;
    }
    
    //默认隐藏checkbox
    function hideCheckbox(){
        $(".table-check").hide();
    }

    function isCheckAll() {
        var checkedLength = $('input[name="ids"]:checked').length;
        $("#checkAll").click(function () {
            //如果全选被选中，遍历所有input，判断有没有被checked，如果没有，赋为true
            var inputList = $('input[name="ids"]');
            for (var i = 0; i < inputList.length; i++) {
                var obj = inputList[i];
                if (!this.checked) {
                    obj.checked = false;
                } else {
                    obj.checked = true;
                }
            }

            //拿出被选中的了的Input输入项的长度
            checkedLength = $("input[name='ids']:checked").length;
            //构造表单提交环境
            $("#delForm").attr({
                "method": "get",
                "action": delFormURL
            });
            $("#del").text("确认" + "(" + checkedLength + ")");
            $("#del").attr("type", "submit");
        });
    }

    function sumChecked() {
        var $ids = $("input[name='ids']");
        $ids.click(function () {
            //复选框不是被全部选中，每次单击input都计算一次已选输入项的长度
            var checkedLength = $("input[name='ids']:checked").length;

            //如果$ids等于checkedLength，即选中了所有的Input输入项，手动赋值checkAll的输入项为true
            var status = $ids.length == checkedLength ? true : false;
            document.getElementById("checkAll").checked = status;

            //构造表单提交环境
            $("#del").text("确认" + "(" + checkedLength + ")");
            $("#del").attr("type", "submit");
        
        });
    }

    //多删
    function  dele(checkedLength) {
        //业帅说function里面不能有click事件，重复调用很危险
        isCheckAll();
        $("#del").attr("class", "am-btn am-btn-danger");
        $("#del").text("选择" + "(" + checkedLength + ")");

        $("#del span").hide();
        $(".table-check").show();

        sumChecked();
        selectHandle();
    }

    //取出被选中的复选框的值到ids数组
    function selectHandle() {
        /*debugger;*/
        var ids = [];
        var i;
        $(".am-btn-danger").click(function () {
            
            $("input[name=ids]:checked").each(function (index, item) {
                ids.push(item.value)
            });
            
        });
        for(i=0;i<ids.length;i++){
            delOne( parseInt(ids[i]) );
        }
    }

    //新增或编辑
    function edit(that){
        if ($(that).parent().attr("data-id") != null) {
            //编辑按钮,输入框填充已经编辑的数据
            $("#name").val($(that).parent().parent().parent().parent().find(".name").html());
            $("#password").val($(that).parent().parent().parent().parent().find(".password").html());
            $("#tel").val($(that).parent().parent().parent().parent().find(".tel").html());
            $("#studentStr").val($(that).parent().parent().parent().parent().find(".studentStr").html());
            $("#memberStr").val($(that).parent().parent().parent().parent().find(".memberStr").html());
            $("#sexStr").val($(that).parent().parent().parent().parent().find(".sexStr").html());
            $("#age").val($(that).parent().parent().parent().parent().find(".age").html());
        } else {
            //新增按钮，输入框置为空
            $("#username").val("");
            $("#password").val("");
            $("#tel").val("");
            $("#studentStr").val("");
            $("#memberStr").val("");
            $("#sexStr").val("");
            $("#age").val("");
        }
        $that = $(that);
        $('#my-prompt').modal({
            relatedTarget: this,
            closeOnConfirm: false,
            onConfirm: function (e) {
                if ($("#username").val() == ""||$("#password").val() == "") {
                    alert("请补充完整用户名和密码信息 ！！");
                    return;
                }

                if ($that.parent().attr("data-id") != null) {
                    /* 不为空就是编辑按钮的实现 */
                    console.log("修改id为" + $that.parent().attr("data-id") + "的值为 " + e.data);//在控制台打印数据的调试语句
                    ajax("../admin/customer/updateCustomer.action?id="
                            + $that.parent().attr("data-id")
                            + "&name=" + $("#name").val()
                            + "&password=" + $("#password").val()
                            + "&phone=" + $("#tel").val()
                            + "&studentStr=" + $("#studentStr").val()
                            + "&memberStr=" + $("#memberStr").val()
                            + "&sexStr=" + $("#sexStr").val()
                            + "&age=" + $("#age").val(), "", function () {
                        //回掉函数，向后台发送数据完毕之后，本页面也要添加数据
                        alert("提交成功！");
                        $('#my-prompt').modal('close');
                        $that.parent().parent().parent().parent().find(".name").html(e.data[0]);
                        $that.parent().parent().parent().parent().find(".password").html("***");
                        $that.parent().parent().parent().parent().find(".tel").html(e.data[2]);
                        $that.parent().parent().parent().parent().find(".studentStr").html(e.data[3]);
                        $that.parent().parent().parent().parent().find(".memberStr").html(e.data[4]);
                        $that.parent().parent().parent().parent().find(".sexStr").html(e.data[5]);
                        $that.parent().parent().parent().parent().find(".age").html(e.data[6]);
                    }, error);
                } else {
                    /*否则就是新增按钮的实现*/
                    console.log("新增的数据是：" + e.data);
                    ajax("../admin/customer/addCustomer.action?name=" + $("#name").val() + "&password=" + $("#password").val() + "&phone=" + $("#tel").val()+"&studentStr=" + $("#studentStr").val() + "&memberStr=" + $("#memberStr").val()+ "&sexStr=" + $("#sexStr").val()+ "&age=" + $("#age").val(), "", function (data) {
                        $('#my-prompt').modal('close');
                        json = JSON.parse(JSON.stringify({
                            "id": data.id,
                            "name": e.data[0],
                            "password": e.data[1],
                            "phone": e.data[2],
                            "studentStr": e.data[3],
                            "memberStr": e.data[4],
                            "sexStr": e.data[5],
                            "age": e.data[6]
                        }));
                        //console.log(json);
                        /* $("tbody").append(appenContent(content, json)); */
                        window.location.reload();
                        $(".table-check").hide();
                        alert("新增成功！");
                        
                    }, error);
                    function  error() {
                        alert("服务器错误");
                    }
                }
            },
            onCancel: function (e) {
            }
        });
    }

    //单删
    function delOne(that) {
        $that = $(that);
        $('#my-confirm').modal({
            relatedTarget: this,
            onConfirm: function (options) {
                console.log("给后台传的提示删除位置的id是：" + $that.parent().attr("data-id"));
                ajax("../admin/customer/removeCustomer.action?id=" + $that.parent().attr("data-id"), "", function () {
                    $that.parent().parent().parent().parent().remove();
                }, error, "text");
            },
            onCancel: function () {
            }
        });
        function error(){
            alert("服务器出错了");
        }
    }
</script>
</html>
